<template>
   <el-dialog
    v-model="dialogVisible"
    title="编辑"
    :before-close="CloseDia"
    width="60%">
    <div class="sample-container">
      <el-form class="sample-form" :model="sampleRecord" ref="sampleRecordRef" label-width="120px" :rules="sampleRecordRules" label-position="left">
        <el-form-item label="id" v-if="false" prop="id">
          <el-input v-model="sampleRecord.id" name="id" />
        </el-form-item>
        <el-form-item label="样本编号" prop="code">
          <el-input v-model="sampleRecord.sample.code" name="code" disabled><template #append><el-button type="primary" @click="selectSample">选择标本</el-button></template></el-input>
        </el-form-item>
        <el-form-item label="取用时间" prop="time">
          <el-col :span="12">
            <el-form-item prop="time">
              <el-date-picker
                v-model="sampleRecord.time"
                type="datetime"
                placeholder=""
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="取用者" prop="user">
          <el-input v-model="sampleRecord.user" name="user"/>
        </el-form-item>
        <el-form-item label="取用量" prop="dosage">
          <el-input v-model.number="sampleRecord.dosage" name="dosage" />
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input type="textarea" v-model="sampleRecord.memo"  name="memo"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <SampleList :isShowDia="showSample" @changeRow="selectSampleRow"></SampleList>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, onActivated, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { add, modify, getById } from '@/api/common/common'
import SampleList from '../sample/index.vue'

const dialogVisible = computed(() => props.isShow)

const currentId = computed(() => props.id)

const showSample = ref(false)

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
  id: {
    type: Number,
    default: null
  }
})

const sampleRecord = ref({
  sample: {}
})
// 根据id获取数据
const selectFormStore = id => {
  getById(id, 'grk/sample-record').then(res => {
    console.log(res)
    sampleRecord.value = res
  })
}

const emits = defineEmits(['onCancel', 'click'])

const onCancel = () => {
  emits('diaCancel', false)
}

watch(() => {
  console.log(currentId.value)
  if (currentId.value) {
    selectFormStore(currentId.value)
  }
})

const id = ref(null)

const sampleRecordRef = ref(sampleRecord.value)

const sampleRecordRules = ref({
  regNum: [
    {
      required: true,
      trigger: 'blur',
      message: '登记号不能为空'
    }
  ],
  name: [
    {
      required: true,
      trigger: 'blur',
      message: '姓名不能为空'
    }
  ],
  sex: [
    {
      required: true,
      trigger: 'blur',
      message: '性别不能为空'
    }
  ]
})
const onSubmit = () => {
  // patient.value.birthday = patient.value.birthday.substr(0, 10)
  if (id.value) { // 判断id是否为空
    sampleRecord.value.id = id.value
    modify(sampleRecord.value, id.value, 'grk/sample-record').then(res => {
      // 关闭该页面
      ElMessage.success('更新成功')
      emits('diaCancel', false)
    })
  } else {
    console.log(sampleRecord)
    add(sampleRecord.value, 'grk/sample-record').then(res => {
      ElMessage.success('新增成功')
      emits('diaCancel', false)
    })
  }
}

const CloseDia = () => {
  emits('diaCancel', false)
}

const selectSampleRow = row => {
  sampleRecord.value.sample = row
  showSample.value = false
}

const selectSample = () => {
  console.log('selectSample')
  showSample.value = true
}
</script>

<style lang="scss" scoped>
.job-container {
  min-height: 100%;
  width: 100%;
  .job-form {
    position: relative;
    width: 90%;
    max-width: 100%;
    top: 50px;
    left: 40px;
  }
}
</style>
